<template>
	<view>
		<view class="container">
			<view class="list-item">
				<view class="item-left">
							<image :src="data.src" class="img"></image>
				</view>
				<view class="item-right">
					<view class="title">{{data.title}}</view>
					<view class="course-info">
						<view>课程信息</view>
						<view>{{data.courseInfo}}</view>
					</view>
					<view class="camp">
						<view>营期</view>
						<view>{{data.camp}}</view>
					</view>
					<view class="money">
						<view>
							<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/usr/dingjin.png"></image>
							<span>￥{{data.deposit}}</span>
							<view class="depositMessage">{{data.depositMessage}}</view>
						</view>
						<view>
							<image src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/usr/weikuan.png"></image>
							<span>￥{{data.balancePayment}}</span>
							<view class="balanceMessage">{{data.balanceMessage}}</view>
						</view>
					</view>
				</view>
			</view>
		  <view class="reason">
			  <view class="content">
				  <view>综合评价</view>
					  <u-rate :count="count" v-model="value" active-color="＃FFFF00"></u-rate>
					  {{value+'分'}}
			  </view>
			  <u-input type="textarea" placeholder="请填写评价内容"/>
		  </view>
		  <view class="submit-btn">
			  <button>提交</button>
		  </view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				count:5,
				value:0,
				data:{
						id: 5,
						school: '佛山校区',
						src: 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/usr/vip.png',
						status: '待结算尾款',
						title: '5天小众海滩+海韵椰林+休闲度假度蜜月',
						courseInfo: '5天少年特训营',
						camp: '2023-06-35—2023-07-07',
						deposit: 500,
						balancePayment: 2300,
						depositMessage: '于2023-07-01已支付',
						balanceMessage: '已支付',
						addressInfo:{
							schoolAddress:'佛山校区',
							collectionAddress:'佛山xxxxx基地地址',
							campAddress:'佛山营地'
						},
						}
			}
			},
		methods:{
			go(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.submit-btn{
		width: 60%;
		// position: fixed;
		margin: 48vh auto;
		// bottom: 20rpx;
		button{
			background-color: #C0C4C1;
			font-size: 32rpx;
		   padding: 20rpx 40rpx;
		   color:white
		}
	}
	.reason{
		margin-top: 50rpx;
		.content{
			justify-content: space-between;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		}
	}
	.bottom{
		display:flex;
		justify-content: space-between;
         align-items: center;
		 margin-top: 40rpx;
		.item-left{
			span{
				color:red;
				padding-left: 20rpx;
			}
		}
		.item-right{
			display: flex;
			button{
				font-size: 32rpx;
				margin-left: 20rpx;
				background-color: #007E51;
				color:white;
				padding: 20rpx 40rpx;
			}
		}
	}
	.money-info{
		.title{
			font-size: 32rpx;
			font-weight: 600;
			text-align: left;
			margin-top: 30rpx;
		}
		view{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.student-info{
		.title{
			font-size: 32rpx;
			font-weight: 600;
			text-align: left;
			margin-top: 30rpx;
		}
		.student-list-item{
			display: flex;
			justify-content: space-around;
			text-align: center;
			align-items: center;
			margin-top: 30rpx;
			button{
				border-radius: 20rpx;
				font-size: 32rpx;
				color:#007E51;
				border:1px solid #007E51;
				padding:5rpx  30rpx;
			}
		}
	}
	.address{
		font-size: 32rpx;
		margin-top: 20rpx;
		view{
			padding-bottom: 10rpx;
			display: flex;
		.key{
			color:#414141
		}
		.value{
			padding-left: 40rpx;
			color:#161D1A
		}	
		}
	}
	.container {
		padding: 30rpx;
		background-color: white;
		min-height: 100vh;
		.status{
		    // padding: 20rpx 0 20rpx 30rpx;
		  	text-align: left;
			    color: #FFAA5B;
			    font-size: 32rpx;
		}
	}
	.list-item{
		background-color: white;
		display: flex;
		justify-content: center;
		.item-left{
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			width: 30vw;
			.school{
				display: flex;
				width: 100%;
				height: 50rpx;
				image{
					height:50rpx;
					width: 50rpx;
				}
			}
			.img{
				width: 100%;
				height:200rpx;
				margin-right: 10rpx;
			}
		}
		.item-right{
			padding: 20rpx;
			box-sizing: border-box;
			width: 70vw;
			.title{
				    font-size: 32rpx;
				    font-weight: 600;
				    display: -webkit-box;
				    -webkit-box-orient: vertical;
				    -webkit-line-clamp: 1;
				    overflow: hidden;
			}
			.money{
				.balanceMessage{
					color:#C0C4C1;
				}
				span{
					color:#F2450F;
					font-size: 32rpx;
					vertical-align: middle;
				}
				.depositMessage{
					color:#C0C4C1
				}
				image{
					vertical-align: middle;
					width: 50rpx;
					height: 50rpx;
				}
			}
			view{
				// padding: 5rpx 0;
			}
			.camp,.money,.course-info{
				display: flex;
				justify-content: space-between;
			}
			.btn{
				display: flex;
				justify-content: flex-end;
				margin-top:20rpx;
				button{
					color:#007E51;
					border-color: #007E51;
					// border-radius: 60rpx;
					margin-left: 30rpx;
				}
			}
		}
	}
</style>